.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  #access2{
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  #access{
    height: 100px;
    width: 100%;
  }
  #pay{
    height: 100px;
    width: 100%;
  }
  .card-title{
    font-size: 24px;
  }
  .card-title-box{
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}

.card {
  margin-top: 1%;
  flex: 1 1 calc(50% - 16px); // 每个卡片占据50%的宽度，并留出16px的间隙
  min-width: 300px; // 最小宽度，确保在小屏幕上单列布局
  .pie-content{
    height: 40vh;
    width: 50%;
    float: left;
    #pie{
      height: 100%;
      width: 50%;
      margin: 0 auto;
    }
  }
  .pie-text{
    float: right;
    width: 50%;
  }
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 100%; // 在小屏幕上每个卡片占据100%的宽度
  }
}
#trade{
  height: 500px;
  width: 100%;
}
.pay{
  margin-top: 1%;
}
